<html>

<head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.father {
			width: 100%;
			height: 500px;
			background: #ccc;
			padding: 0px 20px;
		}

		.child {
			width: 100%;
			height: 300px;
			background: #f00;
		}
	</style>
</head>

<body>
	元素的width、height 设置百分比 是相对于父级元素的内盒宽度（不包括padding border margin）==
	<div class="father">
		<div class="child">
			子盒子
		</div>
	</div>

	<script>

	</script>
</body>

</html>